<template>
	<!-- 单点评吸（新版本） -->
	<view class="com_view">
		<view class="icon_box" @click="helpShow=true">
			<image src="@/static/icons/help.png" mode=""></image>
		</view>
		<scroll-view scroll-x="true" scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<!-- 表头 -->
				<view class="table_header">
					<view class="header_cell" v-for="header in Headers" :key="header.key"
					 :class="header.class+' '+header.bg">
						<text>{{ header.name }}</text>
						<view class="header_options" v-if="header.options&&header.options.length > 0">
							<view class="header_option" v-for="item in header.options" :key="item.value">
								<text>{{ item.label }}</text>
								<text>{{ item.value }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 表格内容 -->
				<view class="table_content">
					<view class="table_row" v-for="row in tableData" :key="row.id">
						<view class="table_cell u-line-1" v-for="header in Headers" :key="header.key"
						 :class="`${header.class} ${header.type !== 'text'&&isSubmit&&!row.meetingMonthlyCorrelationRep[header.key]?'no_fill':''}`">
							<!-- <text v-if="header.type === 'text'">{{ row[header.key] }}</text> -->
							<!-- custom-header-line-1 @click="$showFill(row[header.key], header.isHeader)" -->
							
							<!-- 固定文本 -->
							<view class="" v-if="header.type === 'text'">
								<text>{{ row[header.key] }}</text>
							</view>
							
							<!-- 总计 -->
							<text v-else-if="header.type==='total'"> {{ $ReserveOne(row.meetingMonthlyCorrelationRep[header.key]) }} </text>
							
							
							<!-- 已经提交过 -->
							<text v-else-if="row.meetingMonthlyCorrelationRep.status=='1'||row.disabled||row.status=='0'">
								{{ $ReserveOne(row.meetingMonthlyCorrelationRep[header.key]) }}
							</text>
							
							<!-- 正常输入框: 填写状态和展示状态 -->
							<view class="input_cell" v-else @click="inputCellEv(row, header)">
								
								<text v-if="(row.id+header.key)!==clickId" class="text-show" @click.stop="">
									{{ $ReserveOne(row.meetingMonthlyCorrelationRep[header.key]) }}
								</text>
								<u-input border="surround" inputAlign="center" fontSize="16px"
								 type="number" @blur="inputBlur(row, header, $event)"
								v-model="row.meetingMonthlyCorrelationRep[header.key]" ></u-input>
								
							</view>
							
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<!-- owCancelButton="true" cancelText="暂不提示" @cancel="tipCancel" -->
		
		<u-modal :show="tipShow" title="提示" :content='tipText'
		width="300px" 
		@confirm="tipClose" @close="tipClose"></u-modal>
		
		<view class="submit-line">
			<u-button :text="already? '已提交':'提交'" type="success" class="btn" 
			@click="submit" :disabled="already"></u-button>
		</view>
		
		<u-modal :show="helpShow" title="单点评吸"
		width="400px" 
		@confirm="helpShow=false" @close="helpShow=false">
			<view class="help_box">
				<view class="help_line">
					1、<text>以下数据均为必填项，且步长为0.5。</text>
				</view>
				<view class="help_line">
					2、<text>光泽的取值范围为0~5。</text>
				</view>
				<view class="help_line">
					3、<text>香气的取值范围为0~32。</text>
				</view>
				<view class="help_line">
					4、<text>谐调的取值范围为0~6。</text>
				</view>
				<view class="help_line">
					5、<text>杂气的取值范围为0~12。</text>
				</view>
				<view class="help_line">
					6、<text>刺激性的取值范围为0~20。</text>
				</view>
				<view class="help_line">
					7、<text>余味的取值范围为0~25。</text>
				</view>
			</view>
		</u-modal>
	
		<!-- 提交前的提示 -->
		<u-modal :show="submitShow" title="提交确认" width="300px"
		 content="数据提交后将无法进行修改，您确定要提交吗？"
		:showCancelButton="true" @cancel="submitShow=false" @confirm="submitConfirm" @close="submitClose"
		></u-modal>
	
	</view>
</template>

<script>
	import {
		getMMC
	} from "@/api/correlation.js"
	import {
		getMeetingMonthly,
		meetingMonthlyCorrelation
	} from "@/api/tPoint.js"
	import request from '@/utils/request.js'
	
	/** 表格数据 */
	const tableHeader = [
		{
			name:'样品编号',
			key:'number',
			type: 'text',
			// isHeader: true,
			class: 'no_class',
			bg: 'no_bg'
		},{
			name:'牌别',
			key:'allowanceName',
			type: 'text',
			// isHeader: true,
			class: 'name_class',
			bg: 'name_bg'
		},{
			name:'光泽',
			key:'smokeGloss',
			len: 0.5,
			area: [0, 5],
			options:[ { label: 'Ⅰ', value: '5' },{ label: 'Ⅱ', value: '4' },{ label: 'Ⅲ', value: '3' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'香气',
			key:'smokeAroma',
			len: 0.5,
			area: [0, 32],
			options:[ { label: 'Ⅰ', value: '32' },{ label: 'Ⅱ', value: '28' },{ label: 'Ⅲ', value: '24' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'谐调',
			key:'smokeHarmony',
			len: 0.5,
			area: [0, 6],
			options:[ { label: 'Ⅰ', value: '6' },{ label: 'Ⅱ', value: '5' },{ label: 'Ⅲ', value: '4' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'杂气',
			key:'smokeImpure',
			len: 0.5,
			area: [0, 12],
			options:[ { label: 'Ⅰ', value: '12' },{ label: 'Ⅱ', value: '10' },{ label: 'Ⅲ', value: '8' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'刺激性',
			key:'smokeThrill',
			len: 0.5,
			area: [0, 20],
			options:[ { label: 'Ⅰ', value: '20' },{ label: 'Ⅱ', value: '17' },{ label: 'Ⅲ', value: '15' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'余味',
			key:'smokeAftertaste',
			len: 0.5,
			area: [0, 25],
			options:[ { label: 'Ⅰ', value: '25' },{ label: 'Ⅱ', value: '22' },{ label: 'Ⅲ', value: '20' } ],
			isrequest: true,
			type: 'input'
		},{
			name:'总计',
			key:'smokeTotal',
			isrequest: true,
			type: 'total',
			class: 'total_class'
		},
	]
	
	/** 提示使用的字典项 */
	const tipDict = {
		"smokeGloss": "光泽",
		"smokeAroma": "香气",
		"smokeHarmony": "谐调",
		"smokeImpure": "杂气",
		"smokeThrill": "刺激性",
		"smokeAftertaste": "余味",
	}

	export default{
		name: 'monthlyCom',
		props: {
			id: {
				type: [Number, String],
				default: 0
			},
			already: { // 是否提交过
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 表格数据
				tableData: [],
				tipShow: false, //填写规则不符合的提示
				tipText: "", // 提示内容
				tipShowArr:{
					smokeGloss: true,
					smokeAroma: true,
					smokeHarmony: true,
					smokeImpure: true,
					smokeThrill: true,
					smokeAftertaste: true,
				},
				tipKey: "", //显示的关键词
				isSubmit: false, // 是否点击过提交按钮
				helpShow: false, // 帮助的提示
				submitShow: false, //提交前的提示
				timer2: null, //定时查询后台的数据
				live: true, //表明页面还存活着
				clickId: "", //当前电机的行id+key
			}
		},
		computed:{
			Headers() { return tableHeader }, // 表头列表
		},
		watch:{
			already(nv,ov) {
				if(nv) {
					if(this.timer2) {
						clearTimeout(this.timer2)
					}
					this.repeatGetData()
				}
			}
		},
		mounted() {
			if(this.already) {
				if(this.timer2) {
					clearTimeout(this.timer2)
				}
				this.repeatGetData()
			} else {
				this.getData()
			}
		},
		beforeDestroy() {
			if(this.timer2) {
				clearTimeout(this.timer2)
			}
		},
		methods: {
			
			// 对于已经提交的数据，循环获取数据
			async repeatGetData() {
				this.timer2 = setTimeout(()=>{
					this.repeatGetData()
				}, 1000 * 5)
				const res = await getMeetingMonthly({ allId:this.id, loading: false })
				if(res.code != 200) return;
				let temp = []
				let data = []
				res.data.forEach(ele=>{
					if( ele.status == '0' ) {
						temp.push({ ...ele.meetingMonthlyCorrelationRep, ...ele, disable: true })
					} else {
						data.push({ ...ele.meetingMonthlyCorrelationRep, ...ele })
					}
				})
				this.tableData = [...temp,...data]
			},
			
			inputCellEv(row, header) {
				if( this.already ) return ;
				this.clickId = row.id+header.key
			},
			
			async getData() {
				this.tableData = [];
				const res = await getMeetingMonthly({ allId:this.id })
				console.log("获取到的单点评吸内容", res)
				if(res.code != 200) return;
				let temp = []
				let data = []
				res.data.forEach(ele=>{
					if( ele.status == '0' ) {
						temp.push({ ...ele.meetingMonthlyCorrelationRep, ...ele, disable: true })
					} else {
						data.push({ ...ele.meetingMonthlyCorrelationRep, ...ele })
					}
				})
				this.tableData = [...temp,...data]
				console.log(this.tableData)
			},
			
			inputBlur(row, header, e) {
				// 重置点击位置
				this.clickId = ""
				
				let form = row.meetingMonthlyCorrelationRep
				let len = (header.len||0.1) * 10
				let key = header.key
				let area = header.area||[0,100]
				form[key] = e
				let loop = this.checkValue(form, key, len, area )
				if(!loop) {
					form[key] = null
					return
				};
				
				this.submitCell(form, key)
			},
			// 校验数据
			checkValue(form, key, len, area) {
				this.tipKey = key
				let min = area[0]
				let max = area[1]
				let value = (form[key]||0)* 1
				if(!value) {
					this.tipText = `${tipDict[key]}取值区间为${min} ~ ${max}`
					// this.tipShow = this.tipShowArr[key]
					this.tipShow = true
					return false
				}
				let remain = value * 10 % len
				if(remain !== 0||value <= min || value > max) {
					form[key] = null
					this.submitCell(form, key)
					// tipText 步长为0.5，请填写整数或小数部分为0.5
					if(value < min || value > max) {
						this.tipText = `${tipDict[key]}取值区间为${min} ~ ${max}`
					} else {
						const a = (len/10).toFixed(1)
						this.tipText = `${tipDict[key]}的步长为${a}, 请填写整数或小数部分为${a}或${a}的整数倍`
					}
					// this.tipShow = this.tipShowArr[key]
					this.tipShow = true
					return false
				}
				return true
			},
			
			// 更改单行数据
			async submitCell(form, key) {
				form.smokeTotal = this.getSmokeTotal(form)
				const res = await meetingMonthlyCorrelation({loading: false, ...form})
				if(res.code != 200) {
					form.smokeTotal = form.smokeTotal - form[key]*1
					form[key] = null
				}
			},
			
			/**返回总值*/
			getSmokeTotal(form) {
				let keys = Object.keys(tipDict)
				let total = 0
				keys.forEach(key=>{
					let value = (form[key]||0)*1
					total += value
				})
				return total.toFixed(1)
			},
			
			tipClose() {
				this.tipShow = false
			},
			
			tipCancel() {
				this.tipShowArr[this.tipKey] = false
				console.log(this.tipShowArr)
				this.tipShow = false
			},
			
			submitClose() {
				this.submitShow = false
			},
			
			async submitConfirm() {
				this.$emit('c_submit', '单点评吸');
				// this.$emit('update:Index', 1);
							
				const res = await request.put('/ipad/meetingMonthlyCorrelation/submit/' + this.id, {
					allId: this.id
				})
							
				this.getData()
				this.submitShow = false
			},
			
			async submit() {
			
				this.isSubmit = true
				// 查询填写是否完整
				let isFull = true
				this.tableData.forEach(item => {
					const e = item.meetingMonthlyCorrelationRep
					if (!e.smokeAftertaste || !e.smokeAroma || !e.smokeGloss || !e.smokeHarmony || !e
						.smokeImpure || !e.smokeThrill) {
						isFull = false
					}
				})
			
				if (!isFull) {
					uni.showToast({
						title: '请检查您的输入是否完整',
						icon: 'none',
						mask: true
					})
			
					return false
				}
				
				this.submitShow = true
			
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.com_view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// flex: 1;
		height: 500px;
		padding: 20px;
		padding-top: 0;
		position: relative;
		--def-cell-width: 130px;
		--def-table-bg: rgb(245, 247, 250);
	}
	.icon_box {
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 9;
		transform: translate(-70%, -120%);
		image {
			--hlep-icon-size: 26px;
			width: var(--hlep-icon-size);
			height: var(--hlep-icon-size);
		}
	}
	
	.help_box {
	
		.help_line {
			display: flex;
			line-height: 24px;
		}
	}
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
	.scroll_box {
		width: 100%;
		// height: 100%;
		height: calc(100% - 70px);
		.scroll_content {
			min-width: 100%;
			min-height: 100%;
			position: relative;
			width: max-content;
			background-color: var(--def-table-bg);
			.no_class {
				position: sticky;
				width: 90px;
				z-index: 4;
				left: 1px;
				background-color: var(--def-table-bg);
			}
			.name_class {
				position: sticky;
				width: 240px;
				z-index: 4;
				// left: var(--def-cell-width);
				left: 90px;
				background-color: var(--def-table-bg);
			}
			.no_bg {
				background-image: url(@/static/Maskgroup.png);
			}
			.name_bg {
				background-image: url(@/static/Maskgroup.png);
				background-position: -30px 0px;
			}
			.no_fill {
				background-color: rgba(200, 16, 46, 0.5);
			}
			.total_class {
				width: 98px;
			}
		}
	}
	.table_header {
		width: max-content;
		min-width: 100%;
		background-image: url(@/static/Maskgroup.png);
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		position: sticky;
		top: 0;
		z-index: 8;
		border-left: 1px solid #ddd;
		.header_cell {
			// min-width: 100px;
			// flex: 1;
			height: 100px;
			padding: 10px 0;
			width: var(--def-cell-width);
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ddd;
		}
		.header_options {
			width: 100%;
			margin-top: 10px;
			padding: 0 10px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.header_option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-weight: bold;
				color: #999;
			}
		}
	}
	
	.table_content {
		width: max-content;
		min-width: 100%;
		background-color: rgb(245, 247, 250);
		.table_row {
			width: max-content;
			min-width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ddd;
			border-left: 1px solid #ddd;
		}
		.table_cell {
			// flex: 1;
			// min-width: 100px;
			width: var(--def-cell-width);
			height: 50px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #ddd;
			.input_cell {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.text-show {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					background-color: var(--def-table-bg);
				}
			}
		}
	}
	// v-deep(.u-input) {
	// 	background-color: none !important;
	// }
	
</style>